<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 200px;
				height: 200px;
				background-color: #BBFFAA;
				
				/**
				 * 子元素默认存在于父元素内容区中，理论上讲，子元素最大可以等于父元素内容区大小
				 * 	如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示
				 *	超出父元素的内容，称为溢出的内容
				 * 
				 * 父元素默认是将溢出内容在父元素外边显示
				 *	有时希望，超出的部分，可以在父元素内通过滚动条查看
				 *	通过overflow可以设置父元素如何处理溢出的内容
				 *	可选值：
				 *		visible，默认值，不会对溢出内容做处理，元素会在父元素以外显示
				 *		hidden，内容被修剪，溢出内容不可见
				 *		scroll,内容被修剪，但是浏览器会显示滚动条，以便查看其余内容，该属性，不论内容是否溢出，都会添加水平垂直方向的滚动条
				 *		auto，如果内容被修剪，则浏览器会显示滚动条以便查看其余内容,需要水平就添加水平滚动条，需要垂直就添加垂直滚动条
				 */
				overflow: auto;
			}
			
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
			}
			
		</style>
		
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				
			</div>
		</div>
	</body>
</html>
